<script setup lang="ts">
import {ref, h, reactive, onMounted} from 'vue';
import container from "../../components/container.vue";
import {IconCalendar} from '@arco-design/web-vue/es/icon';
import {storeToRefs} from "pinia";
import {useTag} from "../../store/tag.ts"

const menudata = reactive({
  data: []
})

const data = reactive([]);
onMounted(() => {
  let ds = test()
  ds.forEach(it => {
    data.push(it)
  })

})
const {openTags} = storeToRefs(useTag())
// console.log('#####', openTags)
const expandedKeys = ref([]);

const rowSelection = reactive({
  type: 'checkbox',
  showCheckedAll: true,
  checkStrictly: true
});

//显示隐藏模态框
const modalvisible = ref(false)
//菜单类型
const menuType = ref({})

const add = () => {
  modalvisible.value = true
}
const handleOk = (event) => {
  console.log('点击确定', event);
  modalvisible.value = false
}

//用来生成测试数据的
function test() {
  let i = 1000
  const data = [];
  let j = 0;
  while (j < i) {
    data.push(
        {
          'key': `${j}`,
          'name': `name${j}`,
          'salary': 100 + j,
          'address': 'SADF ',
          'email': 'ASDFG'
        }
    )
    j++
  }
  return data
}
const fieldNames = {value: 'pagsNum', label: 'text'}
const value = ref('p10')
const select_option = reactive([
  {
    pagsNum: 'p10',
    text: '10 条 / 页'
  },
  {
    pagsNum: 'p20',
    text: '20 条 / 页'
  },
  {
    pagsNum: 'p30',
    text: '30 条 / 页'
  },
  {
    pagsNum: 'p50',
    text: '50 条 / 页'
  },
]);
const form = reactive({
  //名称
  name: '',
  //备注
  remarks: '',
  //排序
  order:0,
});

</script>

<template>
  <container :displayNavigation="true">
    <div class="main">
      <div class="functionBar">
        <a-button type="primary" @click="add">
          <template #icon>
            <icon-plus/>
          </template>
          <template #default>添加</template>
        </a-button>
      </div>
      <div class="table_box" v-if="1">
        <a-table :data="data" size='mini'>
          <template #columns>
            <a-table-column title="ID" data-index="name"></a-table-column>
            <a-table-column title="头像">
              <template #cell="{ record }">
                <a-avatar> A</a-avatar>
              </template>
            </a-table-column>
            <a-table-column title="Address" data-index="address"></a-table-column>
            <a-table-column title="Email" data-index="email"></a-table-column>
            <a-table-column title="Optional">
              <template #cell="{ record }">
                <a-space size="medium">
                  <a-button @click="$modal.info({ title:'Name', content:record.name })">增</a-button>
                  <a-button @click="$modal.info({ title:'Name', content:record.name })">删</a-button>
                  <a-button @click="$modal.info({ title:'Name', content:record.name })">改</a-button>
                </a-space>
              </template>
            </a-table-column>
          </template>
          <template #pagination-left>
            共 1000 条
          </template>
          <template #pagination-right>
            <a-select :style="{width:'140px'}" :options="select_option" v-model="value" :field-names="fieldNames"
                      placeholder="sss" size="large">
            </a-select>
          </template>
        </a-table>
      </div>
    </div>
    <!--=[modal-start ]==========================================-->
    <a-modal v-model:visible="modalvisible" @ok="handleOk">
      <template #title>
        新增角色
      </template>
      <a-form :model="form" >
        <a-form-item field="name"  label="名称" required
                     :rules="[{required:true,message:'名称必填'},{minLength:5,message:''}]"
                     :validate-trigger="['change','input']"
        >
          <a-input
              v-model="form.name"
              placeholder="请输入名称"
          />
        </a-form-item>
        <a-form-item field="post" label="备注">
          <a-textarea v-model="form.remarks"  placeholder="请输入备注" :max-length="200" allow-clear show-word-limit />
        </a-form-item>
        <a-form-item field="post" label="排序">
          <a-input-number v-model="form.order" :style="{width:'180px'}" :min="0"  max="10000" mode="button" size="large" class="input-demo" />
        </a-form-item>
      </a-form>
    </a-modal>
    <!--===[modal-end]========================================-->
  </container>
</template>

<style scoped lang="scss">
.addMenuform {
  text-align: center;
}
.main {
  background: #fff;
  border-radius: 8px;
  border: 1px solid red;
  margin-top: 20px;
  padding:20px;
  .table_box{
    margin-top: 20px;
  }
  .functionBar {
  }
}


</style>